@wordsColor: #2d96f0;
@errorColor: #fb0b1c;
@semivalidColor: #fdb222;
@validColor: #41CA05;

div.jMyPuzzle{
	display:block;
    border: 1px solid #ccc;
	height:200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 750px;
    font-size: 14px;

  ul{
    display:block;
    position:absolute;
    margin-top:30px;
    width:100%; 	/* Do not remove */

    li{
      display:block;
      float:left;
      font-size:1.6em;
      font-weight:bold;
      color:white;
      padding:4px 10px 4px 10px;
      margin:2px;
      background-color:@wordsColor;
      cursor:pointer;

      &.normal{
        background-color:@wordsColor;
      }
      &.normal:hover{
        background-color:darken(@wordsColor, 20%);
      }

      &.notValid{
        background-color:@errorColor;
      }

      &.miValid{
        background-color:@semivalidColor;
      }

      &.valid{
        background-color:@validColor;
      }
    }
  }

  input.button{
    border:1px solid #aaa;
    color:#555;
    cursor:pointer;

    &:hover{
      border:1px solid #333;
      color:#000;
    }

    &.reset{
      float:right;
      margin-right:20px;
      margin-top:100px;
      background:transparent url('lightning.png') 5% center no-repeat;
      padding:3px 3px 3px 40px;
      width:120px;
      font-size:1.2em;
    }

    &.check{
      float:right;
      margin-right:20px;
      margin-top:100px;
      background:transparent url('check.png') 5% center no-repeat;
      padding:3px 3px 3px 40px;
      width:120px;
      font-size:1.2em;
    }
  }

  .trials{
    font-weight:bold;
    font-size:1.3em;
    border-bottom:1px solid #ccc;
    margin-bottom:10px;
    text-align:right;
  }


}